【更】由於介面不熟悉，不小心更新掉了第一篇lol 只好重寫囉

本系列紀錄轉行仔我在學習過程的跌跌撞撞，作為好動廢圖粉專猴，雖然切版過也上研究所、實習，
曾經怎樣也無法進入程式運算思維邏輯的世界，範例都還行但無法妥善解決實務問題
直到突然應用圖像學習方法跟無限的腦內風暴，結合設計小圖跟比喻試圖理解開發的廣袤世界。
志不在得獎，在幫助其他轉行仔散彈搶式的更好理解程式概念：《Secrets of a Buccaneer-Scholar 學習要像加勒比海盜》一書提到像 Internet (蜘蛛網，同網際) 的學習方式，連綿向周遭連結、擴散、延展，慢慢補上知識寶圖中的空白，覓出自己的學習之道。Wehelp Ourselves. Make it heuristic!

第一篇想來討論 HTML, CSS 跟 JavaScript
有些人說 HTML 是結構，CSS 是美化，JavaScript 管互動跟資料邏輯；
或者說 HTML 是骨架， CSS 是衣服，以人體呈現。

但以一個初學 CSS 的朋友來說，可能會覺得 CSS 是美化這個概念異常難以消化。
因為 CSS 可以讓 HTML 結構產生各種空間感，對很多人來說這產生了本質性的不同，
搭配 Flex 甚至可以改變方向性，根本就是完全不ㄧ樣的東西吧？
依照外表來看，HTML 與其說是被美化，不如說本來視覺上就是半成品吧？

要認知 CSS 為何是美化效果，必須要從工程師的角度出發思考。
資料的處理跟更新，只要有 HTML 語意標籤、class 跟 id 等等，就能跟 JavaScript 甚至套上模板，與各種後端語言相親相愛的伺服器渲染(Server-Side Rendering），CSS 不討論偽元素跟些許最新支援的互動效果，根本無法改變資料，充其量只能算小三。

但是對一般人而言，有沒有更好理解的方式呢？

我認為比較好的比喻是
HTML 是房子。
CSS 是裝潢、收納。
裝潢不是只是貼貼壁紙而已（美化），包含了許多改變空間感的裝飾柱（就像保麗龍做成的偽元素 XD）
視覺空間感、材質變化的呈現跟改變，會給整個空間帶來觀感上的全新感受。
這個比喻較為不足的只是，CSS 還當真可以撐開、減少各種空間就是，因此也把收納放進比喻的考慮範圍。

就拿列表製成的導覽列來說

  <nav>
    <h1> Logo </h1>
    <ul>
      <li> Cards </li>
      <li> About </li>
      <li> Contacts </li>
    </ul>
  </nav>
  <div class="line"></div>

加上 css 之前
先稱為原始 A 狀態

    nav {
      display: flex;
      justify-content: space-between;
      width: 1200px;
      margin: auto;
    }

    ul {
      list-style: none;
      display: flex;
      gap: 20px;
    }

    .line {
      width: 100%;
      height: 1px;
      background-color: black;
    }

加上 css 之後
成為簡單美化 B 狀態（基本 CSS 排版）

對一般人來說，列表跟導覽列幾乎是完全不同的東西了。
如果再加上更完整的樣式，微調 html ：

    * {
      margin: 0;
      padding: 0;
    }

    header {
      display: flex;
      flex-direction: column;
      background-color: #b7efff;
      height: 100px;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1200px;
      margin: auto;

    }

    ul {
      list-style: none;
      display: flex;
      gap: 20px;
      color: rgb(115, 14, 14);
    }

    .line {
      width: 100%;
      border-top: 1px dotted dodgerblue;
    }

    h1:hover {
      color: firebrick;
    }

  <header> // 加上 header
   <nav>
     <h1> Logo </h1>
     <ul>
       <li> Cards </li>
       <li> About </li>
       <li> Contacts </li>
     </ul>
   </nav>
   <div class="line"></div>
 </header> // 加上 header

暫且稱為精緻美化 C 狀態

到這個地步的話，多數人只會感受到從 B 到 C 的過程稱為美化（樣式、微調）
但是其實 A 到 B 的排版、美化才是重頭戲。
如果是從 A(Html) 到 C(多寫幾行CSS，從排版B，到樣式C)
可能根本看不出來喔？
因為需要程式思維，才能理解他們的資料格式跟背後運作是什麼，亦即各種語意標籤、一個列表與幾個父元素
抽屜共同構成。